<template>
  <div class="player-container" style="margin-left: 100px;margin-top: 100px;">
    <!--    <el-button @click="toImage">toImage</el-button>-->
    <div class="playBox">
      <div v-if="videoUrl" id="video-content">
        <video
          id="myvideo"
          ref="imageTofile"
          class="video-js vjs-default-skin  vjs-big-play-centered"
          controls
          preload="auto"
          poster
        >
          <source
            :src="videoUrl"
            type="application/x-mpegURL"
          >
        </video>
      </div>
      <div
        v-show="!videoUrl"
        class="pays"
        :style="{height:playBox.height+'px',width:playBox.width+'px'}"
        @click="initPlay"
      >
        <img
          v-if="htmlUrl"
          :src="htmlUrl"
          :width="playBox.width"
          :height="playBox.height"
          style="position: absolute;
		      left:0;
		      top:0;
		      cursor: pointer;"
        >
        <div class="video-js" :class="{'activeBackground':htmlUrl}">
          <button
            type="button"
            title="Play Video"
            style="z-index: 100;
             position: absolute;
             z-index: 100;
             left: 206px;
             top: 227px;"
            aria-disabled="false"
            :style="{
              left: (playBox.width/2-87/2)+'px',
              top:(playBox.height/2-45/2)+'px'
            }"
            class="vjs-big-play-button"
          >
            <span class="vjs-icon-placeholder" aria-hidden="true" />
            <span class="vjs-control-text" aria-live="polite">Play Video</span>
          </button>
        </div>
      </div>
    </div>
    <!--    <img :src="htmlUrl" width="100" height="100" style="margin-top: 10px;width: 100px;height: 100px;">-->
  </div>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css' // video.js样式
import 'videojs-contrib-hls'
import html2canvas from 'html2canvas'

export default {
  /* components: {
    html2canvas
  },*/
  props: {
    url: {
      type: String,
      require: true,
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {
      videoUrl: '',
      videoId: '',
      videoType: '',
      videoPlayer: null,
      isVideoTypeChange: 0,
      playBox: {
        width: 500,
        height: 500
      },
      htmlUrl: ''
    }
  },
  watch: {
    videoUrl: {
      immediate: true,
      handler(val) {
        console.log('===============' + val)
        if (val) {
          this.initPlay()
        }
      }
    }
  },
  mounted() {
    this.videoUrl = this.url
    this.$nextTick(() => {
      this.getVideo()
    })
    // this.getVideo(id);
  },
  destroyed() {
    if (this.videoPlayer) {
      this.videoPlayer.pause()
      this.videoPlayer.dispose()
    }
  },
  methods: {
    // 页面元素转图片
    toImage() {
      const option = {
        scale: 3,
        useCORS: true,
        backgroundColor: null,
        allowTaint: true
      }

      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数
      html2canvas(this.$refs.imageTofile, option).then((canvas) => {
        const url = canvas.toDataURL('image/png')
        this.htmlUrl = url
        console.log(this.htmlUrl)
      })
    },
    initPlay() {
      this.htmlUrl = ''
      this.videoUrl = this.url
      this.$nextTick(() => {
        this.getVideo(true)
      })
    },
    getVideo(flag) {
      const _this = this
      this.videoPlayer = videojs('myvideo', {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: true,
        errorDisplay: false,
        controlBar: true,
        autoplay: !!flag,
        width: _this.playBox.width,
        height: _this.playBox.height
      }, function() {
        // this.play()
        this.on('pause', function() { // 延迟下载
          console.log('暂停')
          const loading = _this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.5)'
          })
          try {
            _this.toImage()
            // console.log( _this.videoPlayer.pause)
            _this.videoPlayer && _this.videoPlayer.pause()
            setTimeout(() => {
              console.log('销毁实例================')
              _this.videoUrl = ''
              _this.videoPlayer && _this.videoPlayer.dispose()
              loading.close()
            }, 900)
          } catch (err) {
            setTimeout(() => {
              loading.close()
            }, 2000)
            console.log('播放出错了')
          } finally {

          }
        })
        this.on('error', function() { // 请求数据时遇到错误
          console.log('请求数据时遇到错误')
        })
        this.on('canplay', function() { // 可以播放，但中途可能因为加载而暂停
          console.log('可以播放，但中途可能因为加载而暂停')
        })
        this.on('canplaythrough', function() { // 可以播放，歌曲全部加载完毕
          console.log('可以播放，歌曲全部加载完毕')
        })
      })
    }
  }
}

</script>

<style>
.playBox{
  margin-left:10px;
}
.pays{
  position: relative;
  background: #000;
}
.activeBackground{
  background-color: transparent
}
</style>

